<template>
	<view class="coupons-page bgimg3">
		<u-sticky :bgColor="scrollTop > 20?'#110124':'transparent'" customNavHeight="0" offsetTop="0" class="z-index">

			<u-navbar :title="$t('hhh.t120')" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
				:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
			<u-gap height="100" bgColor="transparent"></u-gap>

			<u-tabs :list="topTab" lineWidth="30" lineHeight="6" lineColor="#E97AFF" :scrollable="false" :activeStyle="{
			    color: '#E97AFF',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: 'rgba(255, 255, 255, 1)',
			    transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeTab"></u-tabs>
			<u-gap height="50" bgColor="transparent"></u-gap>
		</u-sticky>


		<view class="coupons-list  bg-white rounded-top-lg py-3 px-3"
			:class="curIndex === 1?'used':curIndex === 2?'expired':''">
			<view class="coupons-item flex align-center px-6 mb-4" v-for="(item,index) in dataList" :key="index">
				<view class="flex flex-column flex-1">
					<view class="fs-30 font-weight-bold  mb-1 " :class="curIndex !== 0?'ft666666':'ftF3002A'">{{$t('hhh.t118')}}
						${{Number(item.condition_amount)}} {{$t('hhh.t191')}}</view>
					<view class="ftrgba2 fs-24 text-ellipsis" :class="curIndex !== 0?'ftrgba3':'ftF3002A'">{{$t('hhh.t119')}}:
						{{formatDateToDDMMYYYY(item.end_time)}}
					</view>
				</view>
				<view class="flex flex-column align-center ">
					<view class="flex align-center font-weight-bold" :class="curIndex !== 0?'ft666666':'ftF3002A'">
						<text class="fs-24">$</text>
						<text class="fs-60 ml-1">{{Number(item.discount_amount)}}</text>
					</view>
					<text v-if="curIndex !== 0" class="ft999999 fs-28">{{curIndex === 1?'Used':'Expired'}}</text>
				</view>
			</view>
			<nodata v-if="dataList.length === 0"></nodata>
		</view>
	</view>
</template>

<script>
	import {
		formatDateToDDMMYYYY
	} from '@/utils/common.js'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				scrollTop: 0,
				curIndex: 0,
				page: 1,
				dataList: [],
				tempList: [],
			}
		},
		computed: {
			topTab() {
				return [{
						name: this.$t('hhh.t121'),
						status: 0
					},
					{
						name: this.$t('hhh.t122'),
						status: 1
					},
					{
						name: this.$t('hhh.t123'),
						status: 2
					},
				]
			}
		},
		created() {
			this.myCouponList()
		},
		onReachBottom() {
			if (this.tempList.length < 20) return
			this.page++
			this.myCouponList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			formatDateToDDMMYYYY,
			myCouponList() {
				uni.$tools.showLoading()
				HttpApi.myCouponList({
					page: this.page,
					limit: 20,
					status: this.curIndex
				}).then(res => {
					if (res.code === 1) {
						const list = res.data.data || []
						this.tempList = list
						if (this.page === 1) {
							this.dataList = list
						} else {
							this.dataList = this.dataList.concat(list)
						}
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			changeTab(val) {
				this.curIndex = val.status
				this.page = 1
				this.dataList = []
				this.myCouponList()
			}
		}
	}
</script>

<style lang="scss">
	.coupons-page {
		.coupons-list {
			min-height: calc(100dvh - 170px);

			.coupons-item {
				height: 184rpx;
				background-image: url('/static/imgs/coupons_bg.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position: center;
			}

			&.used {
				.coupons-item {
					background-image: url('/static/imgs/coupons_bg2.png');
				}
			}

			&.expired {
				.coupons-item {
					background-image: url('/static/imgs/coupons_bg3.png');
				}
			}
		}
	}
</style>